<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css" />
</head>
<body>
<form class="layui-form" action="">
    <div class="mainBox">
        <div class="main-container">
            <div class="main-container">
                <div class="layui-form-item" style="height: 1px; overflow: hidden">
                    <label class="layui-form-label">上级分类</label>
                    <div class="layui-input-block">
                        <ul id="selectParent" name="parent_id" class="tree" data-id="-1"></ul>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" lay-verify="name" autocomplete="off" placeholder="请输入标题" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">计费方式</label>
                    <div class="layui-input-block">
                      <input type="radio" name="total_type" lay-filter="total-type" value="1" title="按件数" checked>
                      <input type="radio" name="total_type" lay-filter="total-type" value="2" title="按重量">
                      <input type="radio" name="total_type" lay-filter="total-type" value="3" title="按体积">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">配送区域</label>
                    <div class="layui-input-block">
<table class="layui-table"> 
    <tbody id="tableFreightTmp">
        <tr> 
            <th><lable name="area">配送区域</lable></th> 
            <th><lable name="start_num">首件</lable></th> 
            <th><lable name="start_price">运费(元)</lable></th> 
            <th><lable name="step_num">续件</lable></th> 
            <th><lable name="step_price">续费</lable></th>
            <th><lable>操作</lable></th>
        </tr>
        <script type="text/html" id="freightTmp">
        <tr> 
            <td>
             <dl field="area_titles">
               <lable>默认全国</lable>
             </dl>
             <input type="hidden" field="area_ids" name="area_ids[{{d.i}}][]" placeholder="" class="layui-input">
             <button type="button" onclick="setarea(this)" class="layui-btn layui-btn-normal">
              设置区域
            </button>
            </td> 
            <td>
                <div style="width: 50px">
                <input type="number" name="start_num[{{d.i}}][]" placeholder="" class="layui-input">
                </div>
            </td> 
            <td>
                <div style="width: 50px">
                <input type="number" name="start_price[{{d.i}}][]" placeholder="" class="layui-input">
                </div>
            </td> 
            <td>
                <div style="width: 50px">
                <input type="number" name="step_num[{{d.i}}][]" placeholder="" class="layui-input">
                </div>
            </td> 
            <td>
                <div style="width: 50px">
                <input type="number" name="step_price[{{d.i}}][]" placeholder="" class="layui-input">
                </div>
            </td> 
            <td>
                <button type="button" class="pear-btn pear-btn-danger pear-btn-md" event="removeRow">删除</button>
            </td> 
        </tr> 
        </script>

    </tbody>
</table>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"> </label>
                    <div class="layui-input-block">
                        <button type="button" class="pear-btn" id="addArea"> + 添加配送区域 </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="user-save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>
<script type="text/javascript" charset="utf-8" src="/component/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/component/ueditor/ueditor.all.min.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="/component/ueditor/lang/zh-cn/zh-cn.js"></script>

<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script>
var cates = [
    {"id":"1","name":"分类1"},
    {"id":"2","name":"分类2"},
];
let tree = '';
let tdata = [{
    title: '四川'
    ,id: 1
    ,field: 'id'
    ,children: [{
      title: '成都'
      ,id: 3
      ,field: 'id'
      ,href: 'https://www.layui.com/'
    },{
      title: '德阳'
      ,id: 4
      ,field:'id'
      ,spread: true//展开参数
    }]
  }];
function setarea(obj){

    layui.use(['jquery'],function(){
        var $ = layui.jquery;
        var area_title = $(obj).parent().parent().find('[field="area_titles"]');
        var area_ids = $(obj).parent().parent().find('[field="area_ids"]');

        layer.open({
            type: 1
            ,area: ['500px', '300px']
            ,offset: 1 //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
            ,id: 'layerDemo'+1 //防止重复弹出
            ,content: $('#selectParent')
            ,btn: '选好了'
            ,btnAlign: 'r' //按钮居中
            ,shade: 0 //不显示遮罩
            ,yes: function(){
              layer.closeAll();
              var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据
              console.log(checkedData);
              var pro = null,citys = null,pre='';
              area_title.html('')
              if(checkedData.length==0){
                area_title.append('<lable>默认全国</lable>')
              }
              for(var i in checkedData){
                citys = checkedData[i]['children'];
                for(var ii in citys){
                  if(ii>0){
                    pre= ',';
                  }
                  area_title.append(pre+'<lable>'+citys[ii]['title']+'</lable>')
                }
              }
              tree.reload('demoId1',tdata);
            }
        });
    });
}
var modules = [
    'form','jquery','laydate', 'dtree','laytpl','layer','tree','util'
];
layui.use(modules,function(){
    let form = layui.form;
    let $ = layui.jquery;
    let laydate = layui.laydate;

    let dtree = layui.dtree;
    let laytpl = layui.laytpl;
    let layer = layui.layer;


  tree = layui.tree
  var util = layui.util;
 
  //基本演示
  tree.render({
    elem: '#selectParent'
    ,data: tdata
    ,showCheckbox: true  //是否显示复选框
    ,id: 'demoId1'
    ,isJump: true //是否允许点击节点时弹出新窗口跳转
    ,click: function(obj){
      var data = obj.data;  //获取当前点击的节点数据
      console.log('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
    }
  });

    // dtree.renderSelect({
    //     elem: "#selectParent",
    //     url: "/cate/selectParent",
    //     method: 'get',
    //     selectInputName: {nodeId: "parent_id", context: "name"},
    //     skin: "layui",
    //     dataFormat: "list",
    //     response: {treeId: "id", parentId: "parent_id", title: "name"},  //修改response中返回数据的定义
    //     selectInitVal: "0"
    // });
    function changeTitle(type,data){
        var titles = data[type];
        for(title in titles){
            $('lable[name="'+title+'"]').html(titles[title])
        }
    }
    //常规用法
    form.on('radio(total-type)',function(data){
        let total_type = data.value-1;
        var data = [
            {"start_num":"首件","step_num":"续件"},
            {"start_num":"首重","step_num":"续重"},
            {"start_num":"首件","step_num":"续件"},
        ]

        changeTitle(total_type,data)
    })
    form.on('submit(user-save)', function(data){
        let roleIds = "";
        $('input[type=checkbox]:checked').each(function() {
            roleIds += $(this).val()+",";
        });
        roleIds = roleIds.substr(0,roleIds.length-1);
        data.field.roleIds = roleIds;
        console.log(data.field);
        return false;
        $.ajax({
            url:'/cate/create',
            data:JSON.stringify(data.field),
            dataType:'json',
            contentType:'application/json',
            type:'post',
            success:function(result){
                if(result.code==1){
                    layer.msg(result.msg,{icon:1,time:1000},function(){
                        parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                        parent.layui.table.reload("user-table");
                    });
                }else{
                    layer.msg(result.msg,{icon:2,time:1000});
                }
            }
        })
        
        return false;
    });
    //新增
    $('#addArea').click(function(){
        var freightTmp = $('#freightTmp').html();
        var rows = $('#tableFreightTmp').find('tr').length;
        laytpl(freightTmp).render({
            i: rows
          }, function(string){
            $('#tableFreightTmp').append(string);
          });
        
    })
    //删除
    $(document).on('click','button[event="removeRow"]',function(){
        $(this).parent().parent().remove();
    })

})


</script>
<script>
</script>
</body>
</html>